import { ComponentClass } from 'react'
import { connect } from '@tarojs/redux'
import Taro, { Component, Config } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import { SDBody } from 'sudao-ui'
import SDUtils from 'sudao-utils'

import PageProps from '../../../../redux'
import { login, logout, setShopCart } from '../../../../redux/actions'

import './index.less'

import PhoneIcon from '../../../../images/ic_phone.png'
import NextIcon from '../../../../images/ic_next.png'


type PageOwnProps = {}

type PageState = {}

interface StoreInfoPage {
  props: PageProps & PageOwnProps
}

@connect(({userState, cartState}) => ({
  userState,
  cartState
}), (dispatch) => ({
  login(userInfo) {
    dispatch(login(userInfo))
  },
  logout() {
    dispatch(logout())
  },
  setShopCart(cartData) {
    dispatch(setShopCart(cartData))
  }
}))
class StoreInfoPage extends Component<PageOwnProps, PageState> {

  config: Config = {
    navigationBarTitleText: '门店资料'
  }

  render () {
    const { userState: {accountInfo = {} as any} = {} } = this.props
    const storeInfo = accountInfo.storeInfo || {}

    return (
      <SDBody sd-class='container'>
        <View className="section section-top">
          <View className="cell-item border-bottom_1px">
            <View className="title">门店名称</View>
            <View className="sub-title">{storeInfo.name}</View>
          </View>
          <View className="cell-item border-bottom_1px">
            <View className="title">公司名称</View>
            <View className="sub-title">{storeInfo.corporation.corpName || ''}</View>
          </View>
          <View className="cell-item border-bottom_1px">
            <View className="title">所在地区</View>
            <View className="sub-title">{`${storeInfo.addr.provinceName}/${storeInfo.addr.cityName}/${storeInfo.addr.countyName}`}</View>
          </View>
          <View className="cell-item border-bottom_1px">
            <View className="title">门店地址</View>
            <View className="sub-title">{storeInfo.addr.address}</View>
          </View>
          <View className="cell-item border-bottom_1px">
            <View className="title">收货地址</View>
            <View className="sub-title">南京市福园街131号万达广场F座003</View>
          </View>
          <View className="cell-item">
            <View className="title">法定代表人身份证号</View>
            <View className="sub-title">3723454566788</View>
          </View>
        </View>

        <View className="section">
          <View className="main-cell border-bottom_1px">
            <View className="header">
              <View className="title">法定代表人身份证照片（正反面）</View>
            </View>
            <View className="content">
              {
                [storeInfo.corporation.idCardFrontUrl || '', storeInfo.corporation.idCardContraryUrl || ''].map((item, index) => {
                  return (
                    <View className="img-item" key={index}>
                      <Image className="img-icon" mode='aspectFill' lazyLoad src={item}></Image>
                    </View>
                  )
                })
              }
            </View>
          </View>
          <View className="main-cell border-bottom_1px">
            <View className="header">
              <View className="title">门头照片</View>
            </View>
            <View className="content">
              {
                storeInfo.facadeMediaUrls.map((item, index) => {
                  return (
                    <View className="img-item" key={index}>
                      <Image className="img-icon" src={item.mediaUrl}></Image>
                    </View>
                  )
                })
              }
            </View>
          </View>
          <View className="main-cell border-bottom_1px">
            <View className="header">
              <View className="title">店内照片</View>
            </View>
            <View className="content">
              {
                storeInfo.indoorMediaUrls.map((item, index) => {
                  return (
                    <View className="img-item" key={index}>
                      <Image className="img-icon" src={item.mediaUrl}></Image>
                    </View>
                  )
                })
              }
            </View>
          </View>
          <View className="main-cell">
            <View className="header">
              <View className="title">营业执照</View>
            </View>
            <View className="content">
              <View className="img-item">
                <Image className="img-icon" src={storeInfo.corporation.businessFileUrl || ''} mode='aspectFill' lazyLoad></Image>
              </View>
            </View>
          </View>
        </View>

        <View className="section">
          <View className="cell-item border-bottom_1px">
            <View className="title">联系人</View>
            <View className="sub-title">{storeInfo.contactName}</View>
          </View>
          <View className="cell-item">
            <View className="title">联系方式</View>
            <View className="sub-title">{storeInfo.contactPhone}</View>
          </View>
        </View>

        <View className="section">
          <View className="cell-item border-bottom_1px" onClick={this.gotoInvoicePage}>
            <View className="title">开票信息</View>
            <View className="cell-right">
              <View className="sub-title">普票</View>
              <Image className="icon" src={NextIcon}></Image>
            </View>
          </View>
          <View className="cell-item">
            <View className="title">联系专属BD修改资料</View>
            <View className="cell-right">
              <View className="sub-title">张无忌</View>
              <Image className="icon" src={PhoneIcon}></Image>
            </View>
          </View>
        </View>

      </SDBody>
    )
  }

  gotoInvoicePage = () => {
    SDUtils.jumpTo('/pages/other/store/invoice/index')
  }
}

export default StoreInfoPage as ComponentClass<PageOwnProps, PageState>
